<template>
  <div class="slider-box" @mousedown="mouseDown">
    <div class="slider-bar">
      <slot/>
    </div>
    <div class="slider-point" :style="pointStyle"></div>
  </div>
</template>

<script>
import util from "./util";
export default {
  name: "PickerSlider",
  props:{
    value:{type:Number,default:0},
    step:{type:Number,default:1},
    min:{type:Number,default:10},
    max:{type:Number,default:100},
    startOn:{type:String,default:'left'}
  },
  mounted() {
    this.rect=util.getElementRect(this.$el);
    let s=(this.value-this.min)/(this.max-this.min)
    this.point=this.rect.width*s;
  },
  data() {
    return {
      point:0,
      feedback:true
    }
  },
  methods:{
    mouseDown(ev){
      //console.log(ev)
      if(ev.button===0){
        document.documentElement.style.cursor="pointer"
        this.rect=util.getElementRect(this.$el);
        let me=this;
        me.feedback=false;
        /**
         * 计算移动结果
         * @param {MouseEvent} ev
         */
        let cpt=function(ev){
          //console.log(util.toJSON(ev, 'clientX'));
          let ox=ev.clientX-me.rect.left;
          if(ox>me.rect.width) ox=me.rect.width;
          if(ox<0) ox=0;
          if(me.startOn==='right') ox=me.rect.width-ox;
          me.doChange(ox);
          //console.log(me.point)
        }

        cpt(ev);
        let mouseMove=function(ev){
          if(ev.buttons===0){
            document.documentElement.style.cursor=""
            me.feedback=true;
            window.removeEventListener('mousemove',mouseMove);
            window.removeEventListener('mouseup',mouseUp);
            return ;
          }
          cpt(ev);

        };
        let mouseUp=function(ev){
          document.documentElement.style.cursor="";
          me.feedback=true;
          window.removeEventListener('mousemove',mouseMove);
          window.removeEventListener('mouseup',mouseUp);
        };
        window.addEventListener('mousemove',mouseMove);
        window.addEventListener('mouseup',mouseUp);

      }
    },
    doChange(val){
      if(this.point!=val){
        this.point=val;

        let target=val/this.rect.width;
        target=(this.max-this.min)*target+this.min;

        //处理精度
        let decimal=1;
        let step=this.step.toString();
        let l=step.indexOf(".");
        if(l!=-1){
          decimal=Math.pow(10,step.length-l-1)
        }
        step=this.step*decimal;
        target=Math.round(target/this.step)*step/decimal;

        this.$emit('input',target);
        this.$emit('change',target);
      }
    },
  },
  watch:{
    value(n,o){
      if(this.feedback) {
        let s = (this.value - this.min) / (this.max - this.min)
        this.point = this.rect.width * s;
      }
    }
  },
  computed:{
    pointStyle(){
      let st={};
      st[this.startOn]=this.point-7+'px';
      return st;
    }
  }
}
</script>

<style scoped>
*{
  box-sizing: border-box;
}
.slider-box{
  height: 11px;
  position: relative;
}
.slider-bar{
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.slider-point{
  position: absolute;
  width: 15px;
  height: 15px;
  right: -7px;
  top: -2px;
  background-color: white;
  box-shadow: 1px 1px 4px #909090;
  border-radius: 7px;
}
.slider-point:hover{
  cursor: pointer;
}
slider-bar>*{
  height: 100%;
}
</style>
